<template>
  <view class="container">
    <view class="box">
      <!-- 标题区域 -->
      <view class="title-area">
        <uni-icons type="book" size="60rpx" color="#7b61ff" class="title-icon"></uni-icons>
        <view class="main-title">自习室注册</view>
        <view class="sub-title">创建账号，开始你的学习之旅</view>
      </view>

      <!-- 表单区域 -->
      <view class="form-container">
        <uni-forms ref="formRef" :modelValue="form" :rules="rules" validateTrigger="blur">
          <uni-forms-item name="username" required label="账号" label-width="120rpx">
            <uni-easyinput
                prefixIcon="person"
                v-model="form.username"
                placeholder="请设置登录账号"
                class="input-field"
            />
          </uni-forms-item>

          <uni-forms-item name="password" required label="密码" label-width="120rpx">
            <uni-easyinput
                type="password"
                prefixIcon="locked"
                v-model="form.password"
                placeholder="请设置6-20位密码"
                class="input-field"
            />
          </uni-forms-item>

          <uni-forms-item name="confirmPassword" required label="确认密码" label-width="120rpx">
            <uni-easyinput
                type="password"
                prefixIcon="locked"
                v-model="form.confirmPassword"
                placeholder="请再次输入密码"
                class="input-field"
            />
          </uni-forms-item>

          <uni-forms-item>
            <button
                @click="register"
                type="primary"
                class="register-btn"
            >
              完成注册
            </button>
          </uni-forms-item>
        </uni-forms>
      </view>

      <!-- 登录引导 -->
      <view class="login-guide">
        已有账号？
        <text @click="goLogin" class="login-link">立即登录</text>
      </view>

      <!-- 注册须知 -->
      <view class="register-tip">
        注册即表示同意《自习室使用协议》和《隐私政策》
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: '',
        role: 'USER'
      },
      rules: {
        username: {
          rules: [
            { required: true, errorMessage: '请输入账号' }
          ]
        },
        password: {
          rules: [
            { required: true, errorMessage: '请输入密码' }
          ]
        },
        confirmPassword: {
          rules: [
            { required: true, errorMessage: '请确认密码' },
            {
              validator: (value, callback) => {
                if (value !== this.form.password) {
                  callback('两次输入的密码不一致');
                } else {
                  callback();
                }
              },
              errorMessage: '两次输入的密码不一致'
            }
          ]
        }
      }
    }
  },
  methods: {
    // 跳转到登录页
    goLogin() {
      uni.redirectTo({
        url: '/pages/login/login'
      })
    },

    // 注册提交
    register() {
      this.$refs.formRef.validate().then(res => {
        // 移除确认密码字段，避免传给后端
        const { confirmPassword, ...registerData } = this.form;

        this.$request.post('/register', registerData).then(res => {
          if (res.code === '200') {  // 注册成功
            uni.showToast({
              icon: 'success',
              title: '注册成功'
            })
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }, 1000)
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg || '注册失败，请稍后重试'
            })
          }
        }).catch(err => {
          console.error('注册请求失败', err);
          uni.showToast({
            icon: 'none',
            title: '网络异常，请检查网络'
          })
        })
      }).catch(err => {
        console.log('表单验证失败：', err);
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f9f7ff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.box {
  padding: 60rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(123, 97, 255, 0.1);
  margin-top: 40rpx;
  flex: 1;
}

.title-area {
  text-align: center;
  margin-bottom: 60rpx;
}

.title-icon {
  margin-bottom: 20rpx;
}

.main-title {
  font-size: 40rpx;
  font-weight: 500;
  color: #5d46c3;
  margin-bottom: 10rpx;
}

.sub-title {
  font-size: 24rpx;
  color: #9a89e0;
}

.form-container {
  margin: 20rpx 0 40rpx;
}

.input-field {
  border-radius: 10rpx;
  border-color: #e0d9f7;
}

/* 输入框焦点样式 */
::v-deep .uni-easyinput__input:focus {
  border-color: #7b61ff !important;
  box-shadow: 0 0 0 2rpx rgba(123, 97, 255, 0.2) !important;
}

.register-btn {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #7b61ff;
  border-color: #7b61ff;
  border-radius: 10rpx;
  font-size: 28rpx;
}

/* 按钮样式优化 */
::v-deep button[type="primary"]:hover {
  background-color: #6a54e0 !important;
  border-color: #6a54e0 !important;
}

.login-guide {
  text-align: center;
  font-size: 26rpx;
  color: #666;
  margin-top: 20rpx;
}

.login-link {
  color: #7b61ff;
  font-weight: 500;
  text-decoration: underline;
}

.register-tip {
  text-align: center;
  font-size: 20rpx;
  color: #999;
  margin-top: 40rpx;
  padding: 0 20rpx;
  line-height: 1.5;
}
</style>
